<template>
  <div class="bg-[#1a2c38] text-white flex min-375 justify-center">
    <div class="container w-full">
      <!-- 顶部vip&banner -->
      <div
        class="flex flex-col md:flex-row justify-between items-center bg-[#0f212e] p-4 rounded-lg"
      >
        <div class="flex-1 w-full md:w-auto min-w-[300px]">
          <h1 class="text-xl">{{ $t("page.vip.Welcomeback") }}, kichiku5</h1>
          <div class="flex items-center mt-2">
            <span class="text-sm"> {{ $t("page.vip.yourvipprogress") }} </span>
            <div class="w-1/2 h-2 bg-gray-700 rounded-full mx-2">
              <div
                class="h-2 bg-[#1475e1] hover:bg-[#105eb4] rounded-full"
                style="width: 0%"
              ></div>
            </div>
            <span class="text-sm"> 0.00% </span>
          </div>
          <div class="flex items-center mt-2">
            <i class="fas fa-star text-gray-400"> </i>
            <span class="ml-2 text-sm">{{ $t("page.vip.none") }}</span>
            <i class="fas fa-coins text-gray-400 ml-4"> </i>
          </div>
        </div>
        <div class="flex-1 mt-4 md:mt-0">
          <img
            alt="Promotional Image"
            class="rounded-lg w-full md:w-auto"
            height="100"
            src="https://mediumrare.imgix.net/welcome-top-zh.png?&dpr=1&format=auto&auto=format&w=540&q=50"
          />
        </div>
      </div>
      <!-- 娱乐&体育链接 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
        <div
          @click="goPage('casino')"
          class="bg-[#1a2c38] p-4 rounded-lg flex flex-col justify-between cursor-pointer"
        >
          <img
            alt="Entertainment Image"
            class="rounded-lg w-full md:w-auto move-img"
            height="150"
            src="https://mediumrare.imgix.net/welcome-casino-zh.jpg?&dpr=1&format=auto&auto=format&q=50&w=586"
          />
          <div
            class="min-w-[300px]"
            style="display: flex; flex-direction: column"
          >
            <h2 class="text-lg mt-4">娱乐城</h2>
            <div style="display: flex; flex-direction: column; flex-grow: 1">
              <p class="text-sm mt-2">最受欢迎的在线娱乐场</p>
              <p class="text-sm mt-2 text-[#b1bad3]">
                浏览我们种类繁多的赌场游戏，让 Stake
                为您提供既公平又有趣的在线博彩体验。直接通过您的浏览器在老虎机、真人娱乐场、21点、百家乐、轮盘以及数以千计的经典赌场游戏包括您最喜爱的
                Stake 原创游戏上进行投注。
              </p>
            </div>
          </div>
          <button
            class="bg-[#1475e1] hover:bg-[#105eb4] text-white w-full px-4 py-2 rounded mt-4"
          >
            {{ $t("page.home.gotocasino") }}
          </button>
        </div>
        <div
          class="bg-[#1a2c38] p-4 rounded-lg flex flex-col justify-between cursor-pointer"
        >
          <img
            alt="Sports Image"
            class="rounded-lg w-full md:w-auto move-img"
            height="150"
            src="https://mediumrare.imgix.net/welcome-sports-zh.jpg?&dpr=1&format=auto&auto=format&q=50&w=586"
          />
          <div
            class="min-w-[300px]"
            style="display: flex; flex-direction: column"
          >
            <h2 class="text-lg mt-4">体育</h2>
            <div style="display: flex; flex-direction: column; flex-grow: 1">
              <p class="text-sm mt-2">最受欢迎的体育活动</p>
              <p class="text-sm mt-2 text-[#b1bad3]">
                通过我们的体育博彩平台投注于来自世界各地的体育团队、选手及联赛。在综合格斗、篮球、足球等多个体育赛事的各种博彩项目上以及滚球盘口中进行投注，享受无与伦比的体育博彩体验。
              </p>
            </div>
          </div>
          <button
            class="bg-[#1475e1] hover:bg-[#105eb4] text-white w-full px-4 py-2 rounded mt-4"
          >
            {{ $t("page.home.gotosportsbook") }}
          </button>
        </div>
      </div>
      <!-- 充值 -->
      <!-- <div
        class="flex flex-col md:flex-row justify-between items-center mb-4 p-4 bg-[#0f212e]"
      >
        <div class="font-semibold mb-4 md:mb-0">{{ $t("page.home.noBit") }}</div>
        <div
          class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4"
        >
          <div class="flex space-x-4">
            <i class="fab fa-cc-mastercard text-2xl"></i>
            <i class="fab fa-apple-pay text-2xl"></i>
            <i class="fab fa-google-pay text-2xl"></i>
            <i class="fab fa-samsung-pay text-2xl"></i>
          </div>
          <button
            class="bg-[#2f4553] hover:bg-[#557086] text-white px-4 py-2 rounded text-sm font-semibold">
          {{ $t("page.home.buyBit") }}
          </button>
        </div>
      </div> -->
      <!-- 在线投注 -->
      <div class="bg-gray-800 p-4 rounded-lg">
        <div class="flex space-x-4 mb-4 bg-[#0f212e]">
          <button
            @click="activeTab = 'entertainment'"
            :class="{ 'bg-[#2F4553]': activeTab === 'entertainment' }"
            class="text-white px-4 py-2 rounded hover:bg-[#2F4553]"
          >
            娱乐投注
          </button>
          <button
            @click="activeTab = 'sports'"
            :class="{ 'bg-[#2F4553]': activeTab === 'sports' }"
            class="text-white px-4 py-2 rounded"
          >
            体育投注
          </button>
          <button
            @click="activeTab = 'rankings'"
            :class="{ 'bg-[#2F4553]': activeTab === 'rankings' }"
            class="text-white px-4 py-2 rounded"
          >
            杂赛排行榜 <span class="text-green-500">●</span>
          </button>
        </div>
        <table v-if="activeTab === 'entertainment'" class="w-full text-left">
          <thead>
            <tr class="text-gray-400">
              <th class="py-2">游戏</th>
              <th class="py-2">玩家</th>
              <th class="py-2">时间</th>
              <th class="py-2">投注额</th>
              <th class="py-2">乘数</th>
              <th class="py-2">支付额</th>
            </tr>
          </thead>
          <tbody>
            <tr class="bg-gray-700 hover-row">
              <td class="py-2 px-4">
                <i class="fas fa-gamepad"></i> Sweet Bonanza 1000
              </td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">15:21</td>
              <td class="py-2 px-4">$1,250.00 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">0.00×</td>
              <td class="py-2 px-4 text-red-500">
                -$1,250.00 <i class="fas fa-coins"></i>
              </td>
            </tr>
            <tr class="bg-gray-800 hover-row">
              <td class="py-2 px-4">
                <i class="fas fa-gamepad"></i> Sweet Bonanza 1000
              </td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">15:21</td>
              <td class="py-2 px-4">$1,250.00 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">0.00×</td>
              <td class="py-2 px-4 text-red-500">
                -$1,250.00 <i class="fas fa-coins"></i>
              </td>
            </tr>
            <tr class="bg-gray-700 hover-row">
              <td class="py-2 px-4">
                <i class="fas fa-candy-cane"></i> Retro Sweets
              </td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">15:21</td>
              <td class="py-2 px-4">$240.40 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">25.00×</td>
              <td class="py-2 px-4 text-green-500">
                $6,009.98 <i class="fas fa-coins"></i>
              </td>
            </tr>
            <tr class="bg-gray-800 hover-row">
              <td class="py-2 px-4"><i class="fas fa-bomb"></i> Crash</td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">15:21</td>
              <td class="py-2 px-4">$67,487.51 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">2.00×</td>
              <td class="py-2 px-4 text-green-500">
                $134,975.03 <i class="fas fa-coins"></i>
              </td>
            </tr>
            <tr class="bg-gray-700 hover-row">
              <td class="py-2 px-4">
                <i class="fas fa-chess-king"></i> Blackjack VIP 36
              </td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">15:21</td>
              <td class="py-2 px-4">$2,175.09 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">1.23×</td>
              <td class="py-2 px-4 text-green-500">
                $2,664.49 <i class="fas fa-coins"></i>
              </td>
            </tr>
            <tr class="bg-gray-800 hover-row">
              <td class="py-2 px-4">
                <i class="fas fa-gamepad"></i> Sweet Bonanza 1000
              </td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">15:20</td>
              <td class="py-2 px-4">$1,250.00 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">1.64×</td>
              <td class="py-2 px-4 text-green-500">
                $2,050.00 <i class="fas fa-coins"></i>
              </td>
            </tr>
            <tr class="bg-gray-700 hover-row">
              <td class="py-2 px-4">
                <i class="fas fa-gamepad"></i> Sweet Bonanza 1000
              </td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">15:21</td>
              <td class="py-2 px-4">$1,250.00 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">0.32×</td>
              <td class="py-2 px-4 text-red-500">
                -$850.00 <i class="fas fa-coins"></i>
              </td>
            </tr>
          </tbody>
        </table>
        <table v-if="activeTab === 'sports'" class="w-full text-left">
          <thead>
            <tr class="text-gray-400">
              <th class="py-2">游戏</th>
              <th class="py-2">玩家</th>
              <th class="py-2">时间</th>
              <th class="py-2">投注额</th>
              <th class="py-2">乘数</th>
              <th class="py-2">支付额</th>
            </tr>
          </thead>
          <tbody>
            <tr class="bg-gray-700 hover-row">
              <td class="py-2 px-4">
                <i class="fas fa-football-ball"></i> Football
              </td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">14:30</td>
              <td class="py-2 px-4">$500.00 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">1.50×</td>
              <td class="py-2 px-4 text-green-500">
                $750.00 <i class="fas fa-coins"></i>
              </td>
            </tr>
            <tr class="bg-gray-800 hover-row">
              <td class="py-2 px-4">
                <i class="fas fa-basketball-ball"></i> Basketball
              </td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">15:00</td>
              <td class="py-2 px-4">$300.00 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">2.00×</td>
              <td class="py-2 px-4 text-green-500">
                $600.00 <i class="fas fa-coins"></i>
              </td>
            </tr>
          </tbody>
        </table>
        <table v-if="activeTab === 'rankings'" class="w-full text-left">
          <thead>
            <tr class="text-gray-400">
              <th class="py-2">游戏</th>
              <th class="py-2">玩家</th>
              <th class="py-2">时间</th>
              <th class="py-2">投注额</th>
              <th class="py-2">乘数</th>
              <th class="py-2">支付额</th>
            </tr>
          </thead>
          <tbody>
            <tr class="bg-gray-700 hover-row">
              <td class="py-2 px-4">
                <i class="fas fa-trophy"></i> Tournament 1
              </td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">16:00</td>
              <td class="py-2 px-4">$1,000.00 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">3.00×</td>
              <td class="py-2 px-4 text-green-500">
                $3,000.00 <i class="fas fa-coins"></i>
              </td>
            </tr>
            <tr class="bg-gray-800 hover-row">
              <td class="py-2 px-4">
                <i class="fas fa-trophy"></i> Tournament 2
              </td>
              <td class="py-2 px-4"><i class="fas fa-user-secret"></i> 隐身</td>
              <td class="py-2 px-4">17:00</td>
              <td class="py-2 px-4">$2,000.00 <i class="fas fa-coins"></i></td>
              <td class="py-2 px-4">1.50×</td>
              <td class="py-2 px-4 text-green-500">
                $3,000.00 <i class="fas fa-coins"></i>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 显示更多 -->
      <more></more>
    </div>
  </div>
</template>
<script setup name="Home">
import { reactive, ref } from "vue";
import more from "@/components/more/index.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const activeTab = ref("entertainment");
const showMore = ref(false);
const toggleMore = () => {
  showMore.value = !showMore.value;
};
const goPage = path => {
  router.push("/" + path);
};
</script>
<style lang="less" scoped>
img {
  min-width: 300px;
  max-width: 600px;
  width: 100%;
}
.hover-row:hover {
  background-color: #1a2b3c;
}
.move-img {
  will-change: transform;
  transition: 0.3s;
}
.move-img:hover {
  transform: translateY(-4%);
}
</style>
